<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24" class="card-box">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{ areaText ? areaText : '未选择区域' }}</span>
                        <el-date-picker style="float: right; margin-left: 10px" v-model="areaTime" type="daterange"
                            align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" :picker-options="pickerOptions"  @change="changetime">
                        </el-date-picker>
                        <el-select @change="selectDevInfoByAreaId" v-model="selectMenuId" placeholder="请选择区域"
                            style="float: right;">
                            <el-option v-for="item in areaInfoList" :key="item.menuId" :label="item.menuName"
                                :value="item.menuId">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="el-table el-table--enable-row-hover el-table--medium">
                        <div ref="commandstats" style="height: 420px" />
                    </div>
                </el-card>
            </el-col>
            <!-- 未启用该图表 -->
            <el-col :span="24" class="card-box" style="display: none;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>{{ searchForm.devid ? searchForm.devid : '未选择设备' }}</span>
                        <el-date-picker @change="timeChange" style="float: right; margin-left: 10px;" v-model="value2"
                            type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" :picker-options="pickerOptions" ref="searchLocate">
                        </el-date-picker>
                        <div style="float: right;"
                            :style="{ marginTop: searchMarginTop + 'px', marginRight: searchMarginRight + 'px', width: searchBtnWidth + 'px' }"
                            class="searchClass" @mouseenter="checkedColor = (checkedColor !== 1 ? true : 1)"
                            @mouseleave="checkedColor = (checkedColor !== 1 ? false : 1)">
                            <el-input style="float: left;" v-model="searchForm.devid" placeholder="请输入插座编号" clearable
                                :style="{ width: '168px' }" ref="searchInput" @blur="checkedColor = false"
                                @focus="checkedColor = 1">
                            </el-input>
                            <div style="float: left; color: #C0C4CC; cursor: pointer;"
                                :style="{ lineHeight: (searchBtnHeight ? searchBtnHeight : '36') + 'px', height: (searchBtnHeight ? searchBtnHeight : '36') + 'px', left: searchBtnWidth - 30 - 3 + 'px' }"
                                class="el-icon-search searchBtn"
                                :class="checkedColor ? (checkedColor === 1 ? 'checkedColor2' : 'checkedColor') : ''"
                                @click="searchDevInfoByMacId">
                            </div>
                        </div>
                    </div>
                    <div class="el-table el-table--enable-row-hover el-table--medium">
                        <div ref="devInfo" style="height: 420px" />
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getAreaList, getInfo } from "@/api/alm/statistical-export/use-power/use-power";

import * as echarts from "echarts";
import dart from "highlight.js/lib/languages/dart";

export default {
    name: "Server",
    data() {
        return {
            server: [],

            commandstats: null,
            like: true,
            value1: 4154.564,
            title: "增长人数",
            options: [{
                value: '选项1',
                label: '深圳市人民医院'
            }, {
                value: '选项2',
                label: '龙岗区双拥街地铁站'
            }],
            value: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: [],
            areaTime: [],
            areaInfoList: [],
            selectMenuId: '',
            areaText: '',
            searchForm: {},
            searchBtnHeight: '',
            searchMarginTop: '',
            searchMarginRight: '',
            searchBtnWidth: '',
            checkedColor: false,
            devInfo: null
        };
    },
    created() {
        this.value2[0] = new Date(new Date().setHours(0, 0, 0, 0))
        this.value2[1] = new Date(new Date().setHours(23, 59, 59, 999))
        this.getAreaInfo({})
    },
    mounted() {
        this.searchBtnHeight = this.$refs.searchInput.$el.offsetHeight
        this.searchBtnWidth = this.$refs.searchInput.$el.offsetWidth + 30
        this.searchMarginTop = this.$refs.searchLocate.$el.offsetTop
        this.searchMarginRight = this.$refs.searchLocate.$el.offsetWidth + this.searchBtnHeight + 5
    },
    methods: {
        changetime(){
            this.selectDevInfoByAreaId(this.selectMenuId);
        },
        testBtn() {
            this.getAreaInfo();
        },
        init() {
            this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
            window.addEventListener("resize", () => {
                this.commandstats.resize();
            });
        },
        //获取当前用户的区域信息
        getAreaInfo(obj) {
            getAreaList(obj).then((res) => {
                this.areaInfoList = res.data;
            })
        },
        selectDevInfoByAreaId(value) {
            if (this.areaTime.length < 2) {
                this.$message.warning('请先选择时间');
                this.selectMenuId = "";
                return;
            }
            var startTime = this.areaTime[0].getTime();
            var endTime = this.areaTime[1].getTime();
            var obj = {
                "startTime": startTime,
                "endTime": endTime,
                "areaId": value
            }
            getInfo(obj).then((res) => {
                if (res.code == 200) {
                    if (res.data != null) {
                        this.searchDevInfo(res.data.timeData, res.data.sumEnerty,
                            res.data.sumPower, res.data.sumOnlineDev, res.data.sumexDev, res.data.sumDev);
                    } else {
                        this.searchDevInfo();
                        this.$message("未查询到数据");
                    }
                }
                console.log(res);
            })
        },

        setAreaText() {
            for (let areaInfo of this.areaInfoList) {
                if (this.selectMenuId === areaInfo.menuId) {
                    return this.areaText = areaInfo.menuName
                }
            }
            return false;
        },
        timeChange() {
            console.log('this.value2 ', this.value2);
            console.log('Date ', new Date());
        },

        searchDevInfoByMacId(e) {
            //   this.searchDevInfo();
        },

        searchDevInfo(timeData, encurrt, powerDa, onlinedev, exdevm, workDev) {
            // this.devInfo = echarts.init(this.$refs.devInfo, "macarons");
            this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
            this.commandstats.setOption({
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['区域总能耗', '区域总功率', '区域在线数', '区域异常数量', '工作设备数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: timeData
                },
                yAxis: {
                    minInterval: 1,
                    type: 'value'
                },
                series: [
                    {
                        name: '区域总能耗',
                        type: 'line',
                        data: encurrt
                    },
                    {
                        name: '区域总功率',
                        type: 'line',
                        data: powerDa
                    },
                    {
                        name: '区域在线数',
                        type: 'line',
                        data: onlinedev
                    },
                    {
                        name: '区域异常数量',
                        type: 'line',
                        data: exdevm
                    },
                    {
                        name: '工作设备数量',
                        type: 'line',
                        data: workDev
                    }
                ]
            });
            window.addEventListener("resize", () => {
                this.commandstats.resize();
            });
        }
    }
};
</script>
<style scoped>
.card-box {
    /* border: 1px solid #99999974;
    border-radius: 5px; */
}

.searchClass {
    position: absolute;
    right: 0;
    top: 0;
}

.searchBtn {
    width: 30px;
    text-align: center;
    position: absolute;
    border: 1px solid #DCDFE6;
    background-color: #ffffffff;
}

.checkedColor {
    border: 1px solid #C0C4CC;
}

.checkedColor2 {
    border: 1px solid #1890FF;
    animation: borderAnimation2 0.5s forwards;
}

@keyframes borderAnimation2 {
    0% {
        border-color: #C0C4CC;
    }

    100% {
        border-color: #1890FF;
    }
}
</style>
